<template>
    <!-- 详情 -->
    <el-dialog v-model="baTable.table.extend!.showDetailDialog" align-center class="ba-operate-dialog" width="60%">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ $t('shop.order.refund.refund_detail') }}
            </div>
            <!-- 审核同意 -->
            <view class="action" v-if="showAuditBtn(baTable.table.extend!.orderData)">
                <el-button type="danger" @click="onAudit">审核</el-button>
            </view>
            <!-- 审核同意且用户已发货 -->
            <view class="action" v-if="showReceiveBtn(baTable.table.extend!.orderData)">
                <el-button type="primary" @click="baTable.table.extend!.showReceiveDialog = true">确认收货</el-button>
            </view>
        </template>
        <el-scrollbar>
            <view v-if="orderData" class="info-box">
                <!-- 基本信息 -->
                <el-descriptions title="订单信息" border span="3" class="info-box-head">
                    <el-descriptions-item :span="2" label="订单号" min-width="150">{{ orderData.orderRelation.order_no }}</el-descriptions-item>
                    <el-descriptions-item :span="2" label="退货单号" min-width="150">
                        {{ orderData?.user_ship_delivery?.delivery_no }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="申请类型">
                        <el-tag :type="refundTypeTagType(orderData.refund_type)">
                            {{ $t('shop.order.refund.refund_type ' + orderData.refund_type) }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="申请数量">
                        <text>{{ orderData.refund_num }}</text>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="订单总额">
                        <text>{{ orderData.orderRelation.pay_price }}</text>
                        <text v-if="orderData.orderRelation.freight"> ({{ '含运费' + orderData.orderRelation.freight }})</text>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="支付金额">
                        <text>{{ orderData.detail.pay_price }}</text>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="申请金额">
                        <text class="price">{{ orderData.apply_money }}</text>
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="已退金额">
                        <text class="price">{{ orderData.refund_money }}</text>
                        <text v-if="orderData.refund_freight > 0"> ({{ '含运费' + orderData.refund_freight }})</text>
                    </el-descriptions-item>
                </el-descriptions>
                <!-- 处理进度 -->
                <el-descriptions :title="'处理信息'" class="info-box-head" span="3" border>
                    <el-descriptions-item :span="2" label="售后状态" width="200">
                        <el-tag :type="statusTagType(orderData.status)">
                            {{ $t('shop.order.refund.status ' + orderData.status) }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item :label="'审核状态'" :span="2" width="200">
                        <el-tag :type="auditStatusTagType(orderData.audit_status)">
                            {{ $t('shop.order.refund.audit_status ' + orderData.audit_status) }}
                        </el-tag>
                    </el-descriptions-item>
                    <view v-if="orderData.audit_status == 2">
                        <el-descriptions-item label="用户发货" :span="2">
                            <el-tag :type="userShipStatusTagType(orderData.user_ship_status)">
                                {{ $t('shop.order.refund.user_ship_status ' + orderData.user_ship_status) }}
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="商家收货" :span="2">
                            <el-tag :type="receiveStatusTagType(orderData.receive_status)">
                                {{ $t('shop.order.refund.receive_status ' + orderData.receive_status) }}
                            </el-tag>
                        </el-descriptions-item>
                    </view>
                    <view v-if="orderData.audit_status == 3" width="100">
                        <el-descriptions-item label="拒绝原因" :span="3"> {{ orderData.refuse_reason }} </el-descriptions-item>
                    </view>
                </el-descriptions>
                <!-- 详情信息 -->
                <el-descriptions :title="'商品信息'" class="info-box-head"> </el-descriptions>
                <el-table :data="[orderData.detail]" class="info-box-table">
                    <el-table-column :label="'商品名称'" prop="goods_name" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column :label="'商品规格'" prop="spec" align="center" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column :label="'商品图片'" align="center">
                        <template #default="{ row }">
                            <el-image
                                :src="fullUrl(row.image)"
                                :preview-src-list="arrayFullUrl([row.image])"
                                :preview-teleported="true"
                                class="info-box-table-img"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column :label="'商品价格'" prop="pay_price" align="center"></el-table-column>
                    <el-table-column :label="'商品数量'" prop="num" align="center"></el-table-column>
                </el-table>
                <!-- 申请信息 -->
                <el-descriptions :title="'申请描述'" class="info-box-head" border>
                    <el-descriptions-item :span="3" label="问题描述" min-width="100">
                        <text>{{ orderData.remark }}</text>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3" label="图片凭证">
                        <el-image
                            v-for="(item, index) in orderData.remark_images"
                            :key="index"
                            class="info-box-image"
                            :src="fullUrl(item)"
                            :preview-src-list="orderData.remark_images"
                        />
                    </el-descriptions-item>
                </el-descriptions>
            </view>
        </el-scrollbar>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed, inject, onMounted } from 'vue'
import type baTableClass from '/@/utils/baTable'
import { arrayFullUrl, fullUrl } from '/@/utils/common'

import {
    refundTypeTagType,
    statusTagType,
    auditStatusTagType,
    receiveStatusTagType,
    userShipStatusTagType,
    showReceiveBtn,
    showAuditBtn,
} from './index'

const baTable = inject('baTable') as baTableClass

const orderData = computed(() => {
    return baTable.table.extend!.orderData
})

const onAudit = () => {
    baTable.table.extend!.showAuditDialog = true
}

onMounted(() => {})
</script>

<style scoped lang="scss">
.info-box {
    height: 80vh;
    overflow: auto;

    &-head {
        margin-top: 20px;
    }
    &-tag-info {
        cursor: pointer;
        margin-left: 10px;
    }
    &-image {
        height: 60px;
    }

    &-table {
        margin-top: 20px;

        &-img {
            height: 60px;
        }
    }
}

.price {
    color: red;
}

.action {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.info-box-image {
    margin-right: 10px;
    margin-bottom: 10px;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
